<template>
  <div v-if="filmInfo">

    <transition name='show'
                appear
                mode='out-in'>
      <detail-header style="font-size: 20px;"
                     v-scroll='50'
                     v-show='create'
                     :key="1">
        {{filmInfo.name}}
      </detail-header>
    </transition>

    <div :style="{
        backgroundImage:`url(${filmInfo.poster})`,
      }"
         class="poster">
    </div>

    <div class="content">
      <div class="name">{{filmInfo.name}}<span>{{filmInfo.item.name}}</span></div>
      <div class="content-body">
        <div>{{filmInfo.category}}</div>
        <div>{{showtime}}</div>
        <div>{{filmInfo.nation}} | {{filmInfo.runtime}}分钟</div>
        <div style="line-height:15px;"
             :class='isHideen?"hidden1":""'>{{filmInfo.synopsis}}</div>

        <div style="text-align:center;"><i @click="isHideen=!isHideen"
             :class='isHideen?"glyphicon glyphicon-chevron-down":" glyphicon glyphicon-chevron-up"'></i></div>
      </div>
      <!-- <div class="alert alert-danger">111</div> -->

    </div>
    <!-- 横线 -->
    <div style="width: 100%;
    height: 0.625rem;
    background: #eee;"></div>

    <!-- 演职人员 -->
    <div style="padding: 0.9375rem;">

      <div>演职人员</div>
      <detail-swiper :slidesPerView=3.5
                     name='actors'>
        <detail-swiper-item v-for='(data,index) in filmInfo.actors'
                            :key='index'>
          <div :style="{
        backgroundImage:`url(${data.avatarAddress})`,
      }"
               class="avatarAddress">
          </div>
          <div style="text-align:center;">
            <div style="font-size:13px;">{{data.name}}</div>
            <div style="font-size:10px;color:gray;">{{data.role}}</div>
          </div>

        </detail-swiper-item>
      </detail-swiper>
    </div>

    <!-- 横线 -->
    <div style="width: 100%;
    height: 0.625rem;
    background: #eee;"></div>
    <!-- 剧照 -->
    <div style="padding: 0.9375rem;">

      <div>剧照</div>
      <detail-swiper :slidesPerView=2.3
                     name='Stills'>
        <detail-swiper-item v-for='(data,index) in filmInfo.photos'
                            :key='index'>
          <div :style="{
        backgroundImage:`url(${data})`,
      }"
               class="photos"
               @click="handlelarge(index)">
          </div>

        </detail-swiper-item>
      </detail-swiper>
    </div>
    <van-button type="primary"
                block
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                url="/films">选座购票</van-button>
  </div>

</template>
<script>
import axios from 'axios'

import 'bootstrap/dist/css/bootstrap.css'

import DetailSwiper from '../components/detail/DetailSwiper'
import DetailSwiperItem from '../components/detail/DetailSwiperItem'
import DetailHeader from '../components/detail/DetailHeader'
import Vue from 'vue'
import mixin from '@/util/mixin.js'

import { ImagePreview, Toast } from 'vant';

Vue.directive('scroll', {
  inserted (el, binding) {
    // console.log(el)
    el.style.display = 'none'
    window.onscroll = function () {
      if (document.documentElement.scrollTop || document.body.scrollTop > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }

  },
  unbind () {
    window.scroll = null
  }
})
export default {
  mixins: [mixin],
  data () {
    return {
      filmInfo: null,
      premiereAt: 0,
      isHideen: true,
      show: 100,
      create: true
    }
  },
  components: {
    DetailSwiper,
    DetailSwiperItem,
    DetailHeader

  },
  computed: {
    // 把秒转换到毫秒，然后把时间进行解析，转换成字符串
    showtime () {
      var a = new Date(this.premiereAt * 1000)
      var month, day
      if (Number(a.getMonth() + 1) < 10) {
        month = '0' + Number(a.getMonth() + 1)
      } else {
        month = Number(a.getMonth() + 1)
      }
      if (Number(a.getDate()) < 10) {
        day = '0' + Number(a.getDate())
      } else {
        day = Number(a.getDate())
      }

      var time = a.getFullYear() + '-' + month + '-' + day
      return time
    }
  },
  mounted () {
    // 注意 这边是this.$route   这边代表的是局部路由，所以可以拿到信息
    // this.$router 是全局所以拿不到

    //数据没全加载完就出现这个加载中
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0, //设置为0永远不消失
      // loadingType: 'spinner'
    });
    console.log(this.$route.params.id)
    // this.id = this.$route.params.id

    //axios请求数据
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=7264282`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then((res) => {
      console.log(res.data.data.film)
      this.premiereAt = res.data.data.film.premiereAt
      this.filmInfo = res.data.data.film
      Toast.clear() // 	关闭提示    但是这样只能单页面显示，要是要多页面共同通用请看http.js
    })
  },
  methods: {
    //vant 组件,效果就是点击图片就可以放大看到原图
    handlelarge (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIcon: "cross"    //这边是直接引用vant图标的名称，可以显示出来
      });
    }
  },


}
</script>

<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 13.125rem;
  background-position: center;
  background-size: cover;
}
.avatarAddress {
  width: 100%;
  height: 5.3125rem;
  background-position: center;
  background-size: cover;
}
.content {
  padding: 0.9375rem;

  .content-body {
    color: gray;
    font-size: 0.8125rem;
    div {
      margin-top: 4px;
    }
  }
  .name {
    font-weight: 900;
    span {
      margin-left: 0.3125rem;
      font-size: 9px;
      color: #fff;
      background-color: #d2d6dc;
      height: 14px;
      line-height: 14px;
      padding: 0 2px;
      border-radius: 2px;
      display: inline-block;
    }
  }
}
.hidden1 {
  height: 30px;
  overflow: hidden;
}
.photos {
  width: 100%;
  height: 6.25rem;
  background-position: center;
  background-size: cover;
}
.show-enter-active {
  animation: c 1.5s;
}

.show-leave-active {
  animation: c 1.5s reverse;
}

@keyframes c {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.van-button {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 500;
}
</style>